<template>
  <div
    :class="{ active }"
    @click="handleClick"
    class="status-item"
  >
    <div :style="getStatusStyle()">
      <div v-if="status.index===0">
        <el-icon style="vertical-align: middle">
          <VideoPlay />
        </el-icon>
        {{ status.label }}
      </div>
      <div v-if="status.index===1">
        <el-icon style="vertical-align: middle">
          <VideoPause />
        </el-icon>
        {{ status.label }}
      </div>
      <div v-if="status.index===2">
        <el-icon style="vertical-align: middle">
          <Remove />
        </el-icon>
        {{ status.label }}
      </div>
    </div>
    <div v-if="status.index < status.TagStatuses.length - 1" class="separator"></div>
  </div>
</template>

<script setup>
import { VideoPlay, VideoPause, Remove } from "@element-plus/icons-vue";


const props = defineProps({
  status: Object,
  active: Boolean,
  TagStatuses: Array
});

const handleClick = () => {
  emit("click", props.status.index);
};

const getStatusStyle = () => ({
  color: props.active ? "blue" : "black",
  marginLeft: "30px",
  marginRight: "30px"
});
</script>

<style>

.status-item {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.separator {
    width: 1px;
    height: 25px;
    background-color: #ccc;
    margin: 0 5px;
}


.custom-form .el-form-item {
    margin-bottom: 4px; /* 设置每行的下边距为 3px */
}
</style>